<template>
    <div>
        <div class="title">热门推荐</div>
        <ul class="menu">
            <li @click="menu1">笔记本电脑</li>
            <li @click="menu2">手机</li>
            <li @click="menu3">服饰</li>
            <li @click="menu4">手表</li>
            <li>书籍</li>
            <li>玩具</li>
            <li>小家电</li>
            <li>学习用品</li>
            <li>办公用品</li>
            <li>旅游必备</li>
            <li>游戏卡通</li>
        </ul>
    </div>
</template>

<script>
    // 引入事件总线
    import Msg from './Msg.js'

    export default {
        name: "left",
        methods: {
            menu1: function () {
                // 通过数据总线传值给兄弟节点
                Msg.$emit("val", "1");
            },
            menu2: function () {
                // 通过数据总线传值给兄弟节点
                Msg.$emit("val", "2");
            },
            menu3: function () {
                // 通过数据总线传值给兄弟节点
                Msg.$emit("val", "3");
            },
            menu4: function () {
                // 通过数据总线传值给兄弟节点
                Msg.$emit("val", "4");
            }
        }
    }
</script>

<style scoped>
    .title {
        width: 100px;
        color: red;
    }

    .menu {
        padding-inline-start: 0px;
    }

    .menu li {
        list-style: none;
        height: 50px;
        margin-bottom: 2px;
        background-color: white;
        line-height: 50px;
        /* 改变鼠标指针为手形形状 */
        cursor: pointer;
    }
</style>
